<template>
  <div class="users-management">
    <!-- 页面标题和操作栏 -->
    <div class="page-header">
      <div class="header-left">
        <h2>用户管理</h2>
        <p>管理系统中的所有用户账户</p>
      </div>
      <div class="header-right">
        <el-button type="primary" @click="handleAddClick">
          添加用户
        </el-button>
      </div>
    </div>

    <!-- 搜索和筛选栏 -->
    <div class="search-bar">
      <div class="search-left">
        <el-input
          v-model="searchQuery"
          placeholder="搜索用户名、邮箱..."
          prefix-icon="el-icon-search"
          style="width: 300px;"
          @input="handleSearch"
          clearable
        />
        <el-select v-model="roleFilter" placeholder="角色筛选" style="width: 120px;" @change="handleFilter">
          <el-option label="全部" value=""></el-option>
          <el-option label="管理员" value="ADMIN"></el-option>
          <el-option label="用户" value="USER"></el-option>
        </el-select>
        <el-select v-model="statusFilter" placeholder="状态筛选" style="width: 120px;" @change="handleFilter">
          <el-option label="全部" value=""></el-option>
          <el-option label="活跃" value="ACTIVE"></el-option>
          <el-option label="禁用" value="DISABLED"></el-option>
        </el-select>
      </div>
      <div class="search-right">
        <el-button icon="el-icon-refresh" @click="refreshData">刷新</el-button>
      </div>
    </div>

    <!-- 用户表格 -->
    <div class="table-container">
      <el-table 
        :data="filteredUsers"
        v-loading="loading"
        stripe
        style="width: 100%"
        @selection-change="handleSelectionChange"
        :table-layout="'fixed'"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        
        <!-- 隐藏ID列 -->
        <!-- <el-table-column prop="id" label="ID" width="80" sortable></el-table-column> -->
        
        <el-table-column label="用户信息" width="200" :show-overflow-tooltip="true">
          <template #default="{ row }">
            <div class="user-info" v-if="row">
              <div class="user-avatar">
                <span>👤</span>
              </div>
              <div class="user-details">
                <div class="username">{{ row.username }}</div>
                <div class="email">{{ row.email }}</div>
                <div class="user-id">ID: {{ row.userId }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        
        <el-table-column prop="userRole" label="角色" width="100" align="center">
          <template #default="{ row }">
            <el-tag v-if="row" :type="row.userRole === 'ADMIN' ? 'danger' : 'primary'" size="small">
              {{ row.userRole === 'ADMIN' ? '管理员' : '用户' }}
            </el-tag>
          </template>
        </el-table-column>
        
        <el-table-column prop="status" label="状态" width="100" align="center">
          <template #default="{ row }">
            <el-tag v-if="row" :type="row.status === 'ACTIVE' ? 'success' : 'info'" size="small">
              {{ row.status === 'ACTIVE' ? '活跃' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        
        <el-table-column prop="createdAt" label="注册时间" width="160" sortable :show-overflow-tooltip="true">
          <template #default="{ row }">
            <span v-if="row">{{ formatDate(row.createdAt) }}</span>
          </template>
        </el-table-column>
        
        <el-table-column prop="lastLoginAt" label="最后登录" width="160" sortable :show-overflow-tooltip="true">
          <template #default="{ row }">
            <span v-if="row">{{ formatDate(row.lastLoginAt) }}</span>
          </template>
        </el-table-column>
        
        <el-table-column label="操作" min-width="320" fixed="right">
          <template #default="{ row }">
            <div class="action-buttons-inline" v-if="row">
              <el-button 
                link 
                type="primary"
                style="color: #FFF;"
                size="small" 
                @click="editUser(row)"
              >
                编辑
              </el-button>
                              <el-button 
                  link 
                  :type="row.userRole === 'ADMIN' ? 'warning' : 'success'" 
                  size="small" 
                  @click="toggleRole(row)"
                  icon="el-icon-user"
                >
                  {{ row.userRole === 'ADMIN' ? '降为用户' : '升管理员' }}
                </el-button>
              <el-button 
                link 
                :type="row.status === 'ACTIVE' ? 'warning' : 'success'" 
                size="small" 
                @click="toggleStatus(row)"
                icon="el-icon-switch-button"
              >
                {{ row.status === 'ACTIVE' ? '禁用' : '启用' }}
              </el-button>
              <el-button 
                link 
                type="danger" 
                size="small" 
                @click="deleteUser(row)"
                icon="el-icon-delete"
              >
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 批量操作栏 -->
      <div class="batch-actions" v-if="selectedUsers.length > 0">
        <div class="batch-info">
          已选择 {{ selectedUsers.length }} 个用户
        </div>
        <div class="batch-buttons">
          <el-button size="small" @click="batchSetRole('USER')" icon="el-icon-user">
            批量设为用户
          </el-button>
          <el-button size="small" @click="batchSetRole('ADMIN')" icon="el-icon-s-custom">
            批量设为管理员
          </el-button>
          <el-button size="small" @click="batchSetStatus('ACTIVE')" icon="el-icon-check">
            批量启用
          </el-button>
          <el-button size="small" @click="batchSetStatus('DISABLED')" icon="el-icon-close">
            批量禁用
          </el-button>
          <el-button size="small" type="danger" @click="batchDelete" icon="el-icon-delete">
            批量删除
          </el-button>
        </div>
      </div>
    </div>

    <!-- 分页 - 增加间距 -->
    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalUsers"
      />
    </div>

    <!-- 添加/编辑用户对话框 -->
    <el-dialog 
      :title="dialogMode === 'add' ? '添加用户' : '编辑用户'"
      v-model="dialogVisible"
      width="500px"
      @close="resetForm"
    >
      <el-form
        ref="userFormRef"
        :model="userForm"
        :rules="userRules"
        label-width="80px"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="userForm.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="userForm.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        
        <el-form-item label="密码" prop="password" v-if="dialogMode === 'add'">
          <el-input v-model="userForm.password" type="password" placeholder="请输入密码" show-password></el-input>
        </el-form-item>
        
        <el-form-item label="角色" prop="role">
          <el-select v-model="userForm.role" placeholder="请选择角色" style="width: 100%;">
            <el-option label="用户" value="USER"></el-option>
            <el-option label="管理员" value="ADMIN"></el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item label="状态" prop="status">
          <el-select v-model="userForm.status" placeholder="请选择状态" style="width: 100%;">
            <el-option label="活跃" value="ACTIVE"></el-option>
            <el-option label="禁用" value="DISABLED"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm" :loading="submitLoading">
            {{ dialogMode === 'add' ? '添加' : '保存' }}
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios'

export default {
  name: 'Users',
  setup() {
    // 响应式数据
    const users = ref([])
    const loading = ref(false)
    const selectedUsers = ref([])
    const searchQuery = ref('')
    const roleFilter = ref('')
    const statusFilter = ref('')
    const currentPage = ref(1)
    const pageSize = ref(20)
    const totalUsers = ref(0)
    const filteredUsers = ref([])
    
    // 对话框相关
    const dialogVisible = ref(false)
    const dialogMode = ref('add') // 'add' 或 'edit'
    const submitLoading = ref(false)
    const userForm = reactive({
      id: null,
      username: '',
      email: '',
      password: '',
      role: 'USER',
      status: 'ACTIVE'
    })
    
    const userRules = {
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur' }
      ],
      email: [
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
      ],
      role: [
        { required: true, message: '请选择角色', trigger: 'change' }
      ],
      status: [
        { required: true, message: '请选择状态', trigger: 'change' }
      ]
    }

    const userFormRef = ref(null)

    // 处理头像下拉菜单命令
    const handleCommand = (command) => {
      switch (command) {
        case 'profile':
          ElMessage.info('个人资料功能开发中...')
          break
        case 'settings':
          ElMessage.info('系统设置功能开发中...')
          break
        case 'logout':
          ElMessageBox.confirm('确定要退出登录吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            localStorage.removeItem('token')
            ElMessage.success('已退出登录')
            // 这里可以跳转到登录页面
            window.location.href = '/login'
          }).catch(() => {
            // 用户取消
          })
          break
      }
    }

    // 获取用户列表
    const loadUsers = async () => {
      loading.value = true
      try {
        // 调用正确的users表API
        const response = await axios.get('/api/users/list', {
          params: {
            current: currentPage.value,
            size: pageSize.value,
            keyword: searchQuery.value
          },
          headers: {
            'Authorization': `Bearer ${localStorage.getItem('token') || 'mock-jwt-token-1'}`
          }
        })
        
        if (response.data && response.data.code === 200) {
          users.value = response.data.data.records || []
          totalUsers.value = response.data.data.total || 0
          applyFilters()
        } else {
          throw new Error(response.data?.message || '获取用户数据失败')
        }
      } catch (error) {
        console.error('加载用户数据失败:', error)
        ElMessage.error('加载用户数据失败: ' + (error.response?.data?.message || error.message))
        
        // 清空数据
        users.value = []
        totalUsers.value = 0
        applyFilters()
      } finally {
        loading.value = false
      }
    }
    
    const applyFilters = () => {
      let filtered = [...users.value]
      
      // 搜索过滤
      if (searchQuery.value) {
        const query = searchQuery.value.toLowerCase()
        filtered = filtered.filter(user => 
          user.username.toLowerCase().includes(query) ||
          user.email.toLowerCase().includes(query)
        )
      }
      
      // 角色过滤
      if (roleFilter.value) {
        filtered = filtered.filter(user => user.userRole === roleFilter.value)
      }
      
      // 状态过滤
      if (statusFilter.value) {
        filtered = filtered.filter(user => user.status === statusFilter.value)
      }
      
      filteredUsers.value = filtered
      totalUsers.value = filtered.length
    }
    
    const handleSearch = () => {
      currentPage.value = 1
      applyFilters()
    }
    
    const handleFilter = () => {
      currentPage.value = 1
      applyFilters()
    }
    
    const refreshData = () => {
      loadUsers()
    }
    
    const handleSelectionChange = (selection) => {
      selectedUsers.value = selection
    }
    
    const handleSizeChange = (size) => {
      pageSize.value = size
      currentPage.value = 1
    }
    
    const handleCurrentChange = (page) => {
      currentPage.value = page
    }
    
    const handleAddClick = () => {
      // 添加用户点击日志已移除
      showAddDialog()
    }



    const showAddDialog = () => {
      console.log('showAddDialog 被调用')
      dialogMode.value = 'add'
      resetForm()
      dialogVisible.value = true
      console.log('dialogVisible 设置为:', dialogVisible.value)
      console.log('dialogMode 设置为:', dialogMode.value)
    }
    
    const showEditDialog = (user) => {
      dialogMode.value = 'edit'
      userForm.id = user.userId
      userForm.username = user.username
      userForm.email = user.email
      userForm.password = ''
      userForm.role = user.userRole
      userForm.status = user.status
      dialogVisible.value = true
    }
    
    const resetForm = () => {
      Object.assign(userForm, {
        id: null,
        username: '',
        email: '',
        password: '',
        role: 'USER',
        status: 'ACTIVE'
      })
      if (userFormRef.value) {
        userFormRef.value.resetFields()
      }
    }
    
    const submitForm = () => {
      userFormRef.value.validate(async (valid) => {
        if (valid) {
          submitLoading.value = true
          try {
            if (dialogMode.value === 'add') {
              await addUser()
            } else {
              await updateUser()
            }
            dialogVisible.value = false
            await loadUsers()
          } catch (error) {
            console.error('操作失败:', error)
          } finally {
            submitLoading.value = false
          }
        }
      })
    }
    
    const addUser = async () => {
      try {
        const response = await axios.post('/api/users/add', {
          username: userForm.username,
          email: userForm.email,
          password: userForm.password,
          userRole: userForm.role,
          status: userForm.status
        }, {
          headers: {
            'Authorization': `Bearer ${localStorage.getItem('token') || 'mock-jwt-token-1'}`
          }
        })
        
        if (response.data && response.data.code === 200) {
          ElMessage.success('用户添加成功')
        } else {
          throw new Error(response.data?.message || '添加用户失败')
        }
      } catch (error) {
        console.error('添加用户失败:', error)
        ElMessage.error('添加用户失败: ' + (error.response?.data?.message || error.message))
        throw error
      }
    }
    
    const updateUser = async () => {
      try {
        const response = await axios.put(`/api/users/${userForm.id}/edit`, {
          username: userForm.username,
          email: userForm.email,
          password: userForm.password, // 如果为空，后端不会更新密码
          userRole: userForm.role,
          status: userForm.status
        }, {
          headers: {
            'Authorization': `Bearer ${localStorage.getItem('token') || 'mock-jwt-token-1'}`
          }
        })
        
        if (response.data && response.data.code === 200) {
          ElMessage.success('用户更新成功')
        } else {
          throw new Error(response.data?.message || '更新用户失败')
        }
      } catch (error) {
        console.error('更新用户失败:', error)
        ElMessage.error('更新用户失败: ' + (error.response?.data?.message || error.message))
        throw error
      }
    }
    
    const formatDate = (dateString) => {
      if (!dateString) return '从未登录'
      const date = new Date(dateString)
      // 使用更紧凑的日期格式
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')
      
      // 如果是今年，只显示月日和时间
      const currentYear = new Date().getFullYear()
      if (year === currentYear) {
        return `${month}-${day} ${hours}:${minutes}`
      } else {
        return `${year}-${month}-${day} ${hours}:${minutes}`
      }
    }
    
    const editUser = (user) => {
      showEditDialog(user)
    }
    
    const toggleRole = async (user) => {
      try {
        const newRole = user.userRole === 'ADMIN' ? 'USER' : 'ADMIN'
        let confirmText = ''
        
        if (newRole === 'ADMIN') {
          confirmText = `确定要将用户 ${user.username} 升为管理员吗？`
        } else {
          confirmText = `确定要将用户 ${user.username} 降为普通用户吗？`
        }
        
        await ElMessageBox.confirm(confirmText, '确认操作', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        
        const response = await axios.put(`/api/users/${user.userId}/role`, {
          role: newRole
        }, {
          headers: {
            'Authorization': `Bearer ${localStorage.getItem('token') || 'mock-jwt-token-1'}`
          }
        })
        
        if (response.data && response.data.code === 200) {
          ElMessage.success('角色更新成功')
          await loadUsers()
        } else {
          ElMessage.error(response.data?.message || '角色更新失败')
        }
      } catch (error) {
        if (error !== 'cancel') {
          console.error('更新角色失败:', error)
          ElMessage.error('更新角色失败')
        }
      }
    }
    
    const toggleStatus = async (user) => {
      const action = user.status === 'ACTIVE' ? '禁用' : '启用'
      const newStatus = user.status === 'ACTIVE' ? 'DISABLED' : 'ACTIVE'
      
      try {
        await ElMessageBox.confirm(`确定要${action}用户 "${user.username}" 吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        
        // 调用实际的API更新用户状态
        const response = await axios.put(`/api/users/${user.userId}/status`, {
          status: newStatus
        }, {
          headers: {
            'Authorization': `Bearer ${localStorage.getItem('token') || 'mock-jwt-token-1'}`
          }
        })
        
        if (response.data && response.data.code === 200) {
          user.status = newStatus
          ElMessage.success(`用户${action}成功`)
        } else {
          throw new Error(response.data?.message || `用户${action}失败`)
        }
      } catch (error) {
        if (error !== 'cancel') {
          console.error('操作失败:', error)
          ElMessage.error(`用户${action}失败: ` + (error.response?.data?.message || error.message))
        }
      }
    }
    
    const deleteUser = async (user) => {
      try {
        await ElMessageBox.confirm(`确定要删除用户 ${user.username} 吗？此操作不可恢复！`, '删除确认', {
          confirmButtonText: '确定删除',
          cancelButtonText: '取消',
          type: 'error'
        })
        
        const response = await axios.delete(`/api/users/${user.userId}`, {
          headers: {
            'Authorization': `Bearer ${localStorage.getItem('token') || 'mock-jwt-token-1'}`
          }
        })
        
        if (response.data && response.data.code === 200) {
          ElMessage.success('用户删除成功')
          await loadUsers()
        } else {
          ElMessage.error(response.data?.message || '用户删除失败')
        }
      } catch (error) {
        if (error !== 'cancel') {
          console.error('删除用户失败:', error)
          ElMessage.error('用户删除失败: ' + (error.response?.data?.message || error.message))
        }
      }
    }
    
    const batchSetRole = async (role) => {
      if (selectedUsers.value.length === 0) {
        ElMessage.warning('请先选择用户')
        return
      }
      
      try {
        const roleText = role === 'ADMIN' ? '管理员' : '用户'
        await ElMessageBox.confirm(`确定要将选中的 ${selectedUsers.value.length} 个用户设为${roleText}吗？`, '批量操作确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        
        const promises = selectedUsers.value.map(user => 
          axios.put(`/api/users/${user.userId}/role`, { role }, {
            headers: {
              'Authorization': `Bearer ${localStorage.getItem('token') || 'mock-jwt-token-1'}`
            }
          })
        )
        
        await Promise.all(promises)
        ElMessage.success(`批量设置${roleText}成功`)
        await loadUsers()
      } catch (error) {
        if (error !== 'cancel') {
          console.error('批量设置角色失败:', error)
          ElMessage.error('批量设置角色失败')
        }
      }
    }
    
    const batchSetStatus = async (status) => {
      if (selectedUsers.value.length === 0) {
        ElMessage.warning('请先选择用户')
        return
      }
      
      try {
        const statusText = status === 'ACTIVE' ? '启用' : '禁用'
        await ElMessageBox.confirm(`确定要${statusText}选中的 ${selectedUsers.value.length} 个用户吗？`, '批量操作确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        
        const promises = selectedUsers.value.map(user => 
          axios.put(`/api/users/${user.userId}/status`, { status }, {
            headers: {
              'Authorization': `Bearer ${localStorage.getItem('token') || 'mock-jwt-token-1'}`
            }
          })
        )
        
        await Promise.all(promises)
        ElMessage.success(`批量${statusText}成功`)
        await loadUsers()
      } catch (error) {
        if (error !== 'cancel') {
          console.error('批量设置状态失败:', error)
          ElMessage.error('批量设置状态失败')
        }
      }
    }
    
    const batchDelete = async () => {
      if (selectedUsers.value.length === 0) {
        ElMessage.warning('请先选择用户')
        return
      }
      
      try {
        await ElMessageBox.confirm(`确定要删除选中的 ${selectedUsers.value.length} 个用户吗？此操作不可恢复！`, '批量删除确认', {
          confirmButtonText: '确定删除',
          cancelButtonText: '取消',
          type: 'error'
        })
        
        const promises = selectedUsers.value.map(user => 
          axios.delete(`/api/users/${user.userId}`, {
            headers: {
              'Authorization': `Bearer ${localStorage.getItem('token') || 'mock-jwt-token-1'}`
            }
          })
        )
        
        await Promise.all(promises)
        ElMessage.success('批量删除成功')
        await loadUsers()
      } catch (error) {
        if (error !== 'cancel') {
          console.error('批量删除失败:', error)
          ElMessage.error('批量删除失败')
        }
      }
    }

    // 组件挂载时获取数据
    onMounted(() => {
      loadUsers()
    })

    return {
      users,
      loading,
      selectedUsers,
      searchQuery,
      roleFilter,
      statusFilter,
      currentPage,
      pageSize,
      totalUsers,
      filteredUsers,
      dialogVisible,
      dialogMode,
      submitLoading,
      userForm,
      userRules,
      userFormRef,
      handleCommand,
      loadUsers,
      applyFilters,
      handleSearch,
      handleFilter,
      refreshData,
      handleSelectionChange,
      handleSizeChange,
      handleCurrentChange,
      handleAddClick,
      showAddDialog,
      showEditDialog,
      resetForm,
      submitForm,
      addUser,
      updateUser,
      formatDate,
      editUser,
      toggleRole,
      toggleStatus,
      deleteUser,
      batchSetRole,
      batchSetStatus,
      batchDelete
    }
  }
}
</script>

<style scoped>
.users-management {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.header-left h2 {
  margin: 0 0 5px 0;
  color: #333;
}

.header-left p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.header-right {
  display: flex;
  align-items: center;
}

/* 用户头像下拉菜单样式 */
.user-dropdown {
  cursor: pointer;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.username {
  font-size: 14px;
  color: #333;
}

.search-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  background: white;
  padding: 15px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.search-left {
  display: flex;
  gap: 10px;
  align-items: center;
}

.table-container {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  overflow-x: auto;
}

.el-table {
  min-width: 1000px;
  border-radius: 0;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: white;
  flex-shrink: 0;
}

.user-details {
  flex: 1;
  min-width: 0;
}

.username {
  font-weight: 600;
  color: #333;
  font-size: 13px;
  margin-bottom: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.email {
  color: #666;
  font-size: 11px;
  margin-bottom: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-id {
  color: #999;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.action-buttons-inline {
  display: flex;
  gap: 4px;
  align-items: center;
  white-space: nowrap;
}

.action-buttons-inline .el-button {
  padding: 2px 6px;
  font-size: 11px;
  height: 24px;
  line-height: 1;
  border-radius: 4px;
  flex-shrink: 0;
}

.action-buttons-inline .el-button span {
  white-space: nowrap;
}

.action-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.action-buttons .el-button {
  padding: 4px 8px;
  font-size: 12px;
}

.batch-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: #f8f9fa;
  border-top: 1px solid #e9ecef;
  margin-top: 0;
}

.batch-info {
  color: #495057;
  font-weight: 500;
}

.batch-buttons {
  display: flex;
  gap: 8px;
}

.batch-buttons .el-button {
  padding: 6px 12px;
  font-size: 12px;
}

.dialog-footer {
  text-align: right;
}

.dialog-footer .el-button {
  margin-left: 10px;
}

/* 分页容器 - 增加上边距 */
.pagination-container {
  display: flex;
  justify-content: center;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-top: 30px; /* 增加上边距，与表格分开 */
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }
  
  .search-bar {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }
  
  .search-left {
    flex-wrap: wrap;
    width: 100%;
  }
  
  .batch-actions {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
  
  .batch-buttons {
    flex-wrap: wrap;
    width: 100%;
  }
  
  .action-buttons {
    flex-direction: column;
    gap: 4px;
  }
}

/* 表格样式优化 */
.el-table th {
  background-color: #fafafa;
  color: #333;
  font-weight: 600;
}

.el-table td {
  border-bottom: 1px solid #f0f0f0;
}

.el-table--striped .el-table__body tr.el-table__row--striped td {
  background-color: #fafafa;
}

/* 标签样式 */
.el-tag {
  border-radius: 12px;
  font-size: 11px;
  padding: 2px 8px;
}

/* 下拉菜单样式 */
:deep(.el-dropdown-menu) {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
</style> 